<template>
  <div class="app-container">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="right" label-width="170px"
      style="margin-left:30px;">
      <div>
        <span>快递100配置</span>
        <el-divider></el-divider>
      </div>
      <el-form-item label="kuaiDiKey" prop="kuaiDiKey">
        <el-input v-model="ruleForm.kuaiDiKey" style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item label="kuaiDiCustomer" prop="kuaiDiCustomer">
        <el-input v-model="ruleForm.kuaiDiCustomer" style="width: 323.06px"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="fixed-bottom-20">
          <el-button type="primary" @click="submitForm('ruleForm')">立即提交</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {
    Message
  } from 'element-ui'
  import {
    toEditKuaiDi,
    EditKuaiDi
  } from '@/api/system'
  export default {
    name: "wxpayconfig",
    data() {
      return {
        ruleForm: {},
        rules: {
          kuaiDiKey: [{
            max: 50,
            message: '不能超过50个字符',
            trigger: 'blur'
          }],
          kuaiDiCustomer: [{
            max: 50,
            message: '不能超过50个字符',
            trigger: 'blur'
          }]
        }
      };
    },
    created() {
      toEditKuaiDi().then(res => {
        this.ruleForm = res.data.data.config
      })
    },
    methods: {
      submitForm(ruleForm) {
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            EditKuaiDi(this.ruleForm).then(res => {
              if (!res.data.success) {
                Message.error(res.data.message);
                return;
              }
              Message.success('操作成功')
              return;
            })
          }
        });
      }
    }
  }
</script>
<style>
</style>
